<!DOCTYPE html>
<html>
<head>
    <title>中药药性识别</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/js.cookie.js"></script>
    <link href="/css/style02.css" rel="stylesheet"/>
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
</head>
<body style="background: #F0FFFF">
<!--header-->
<div class="header header-top">
    <div class="container">
        <div class="logo">
            <h1><a href="/drug/index_second">
                中药药性识别系统
            </a></h1>
        </div>
        <div class="top-nav">
            <span class="menu"><img src="/images/menu.png" alt=""></span>
            <ul>
                <li><a href="/index" class="hvr-sweep-to-bottom">主页</a></li>
                <li><a href="/drug/drug_mail" class="hvr-sweep-to-bottom">关于</a></li>
            </ul>
            <!--script-->
            <script>
                $("span.menu").click(function () {
                    $(".top-nav ul").slideToggle(500, function () {
                    });
                });
            </script>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
</div>
<!--contact-->
<div class="container">
    <div class="contact">
        <div class="contact-top">
            <h2 style="color: #e53c2d">中药药性识别系统</h2>
        </div>
        <div class="map">
        </div>

        <!--与带预测相似的中药4名称-->
        <div class="contact-bottom"
             style="font-size: 18px;border: 2px solid black;padding-top: 40px;padding-bottom: 40px">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="drug2" class="col-md-offset-1 col-md-4 control-label">请输入待预测中药的名称：</label>
                    <div class="col-sm-4">
                        <input type="search" class="form-control" id="drug2" placeholder="待预测中药的名称">
                    </div>
                </div>
                <div class="form-group">
                    <label for="drug3" class="col-md-offset-1 col-md-4 control-label">待预测中药的药性：</label>
                    <div class="col-sm-4">
                        <p class="form-control-static" id="drug3">请输入中药名称</p>
                    </div>
                </div>

                <div class="col-md-offset-5 col-md-3" id="zhanshi" style="text-align: center"></div>


                <div class="row" style="margin-left: 25%;margin-top: 80px;margin-bottom: 50px" id="info">
                    <div class="col-md-12"><h3 style="color: red">根据紫外光谱计算的拥有与待预测中药相似结构的中药展示</h3></div>
                </div>

                <div class="row" style="text-align:center;">
                    <div class="col-md-2"></div>
                    <div class="col-md-3" id="d1"></div>
                    <div class="col-md-3" id="d2"></div>
                    <div class="col-md-3" id="d3"></div>
                </div>
                <div class="row" style="text-align:center;">
                    <div class="col-md-2"></div>
                    <div class="col-md-3" id="d4"></div>
                    <div class="col-md-3" id="d5"></div>
                    <div class="col-md-3" id="d6"></div>
                </div>
                <div class="row" style="text-align:center;">
                    <div class="col-md-2"></div>
                    <div class="col-md-3" id="d7"></div>

                </div>

                <button id="uploadFileBtn" class="btn-primary btn" style="margin-left: 45%">开始分析</button>
                <div id="tishi"
                     style="font-family:华文楷体;color: white;font-size:25px;background:red;display: none;/*margin-top:35px;margin-left: 45%;*/position: fixed;top: 50%;left: 50%;">加载中...
                </div>
            </form>

        </div>
    </div>
</div>
<div class="address" style="font-size: 12px;">
    <div class="container">
        <div class=" address-more">
            <h3 style="text-align: center">联系方式</h3>
            <div class="col-md-4 address-grid">
                <i class="glyphicon glyphicon-map-marker"></i>
                <div class="address1">
                    <p>山东省济南市</p>
                    <p>山东中医药大学</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 address-grid ">
                <i class="glyphicon glyphicon-phone"></i>
                <div class="address1">
                    <p>17862970000</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 address-grid ">
                <i class="glyphicon glyphicon-envelope"></i>
                <div class="address1">
                    <p><a href="mailto:@example.com">bmie530@163.com</a></p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script>

    $('#uploadFileBtn').click(function () {
        let name = $("#drug2").val()
        $("#tishi").show()
        $.ajax({
            url: '/drug',
            type: 'post',
            dataType: 'json',
            data: {
                name: name
            },
            success: function (response) {

                $("#zhanshi").html('<image src="/medicine_images/' + name +
                    '.jpg" style="height: 150px;width: 150px"></image>' + '<br>' + '待预测中药名称：' + name)
                for (let i in response[i]);
                    if (i == 0) {
                        $("#drug" + (Number(i) + 3)).text(response[i] == 1 ? '热性' : '寒性')

                    } else {


                        $('#d' + i).html('<image src="/medicine_images/' + response[i].name +
                            '.jpg" style="height: 150px;width: 150px"></image>' + '<br>' + response[i].name)

                    }

                },

            error:function(){
                alert("出错了")
            },

            complete: function() {
                $("#tishi").hide()
            }
        });
        return false;
    })
</script>
</body>
</html>